<template>
	<div class="activity-management">
		<!-- 搜索区域 -->
		<el-row :gutter="20" class="search-bar">
			<el-col :span="6">
				<el-input placeholder="请输入活动编号" v-model="searchForm.activityId"></el-input>
			</el-col>
			<el-col :span="6">
				<el-input placeholder="请输入活动标题" v-model="searchForm.activityTitle"></el-input>
			</el-col>
			<el-col :span="8">
				<el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
					v-model="searchForm.timeRange"></el-date-picker>
			</el-col>
			<el-col :span="4">
				<el-button type="primary">搜索</el-button>
				<el-button>重置</el-button>
			</el-col>
		</el-row>

		<!-- 创建活动按钮 -->
		<el-button type="primary" class="create-btn">创建活动</el-button>

		<!-- 表格区域 -->
		<el-table :data="tableData" border style="width: 100%; margin-top: 20px"
			:default-sort="{ prop: 'createTime', order: 'descending' }">
			<el-table-column prop="index" label="序号" width="50" align="center"></el-table-column>
			<el-table-column prop="activityTitle" label="活动标题" align="center">
				<template slot-scope="scope">
					<!-- 改用 el-tooltip 原生包裹方式，解决报错 -->
					<el-tooltip placement="top" effect="dark" :content="scope.row.activityTitle">
						<span class="ellipsis-text">{{ scope.row.activityTitle }}</span>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column prop="sponsor" label="主办方" align="center" show-overflow-tooltip></el-table-column>
			<el-table-column prop="activityStatus" label="活动状态" align="center">
				<template slot-scope="scope">
					<el-select v-model="scope.row.activityStatus" placeholder="请选择">
						<el-option label="进行中" value="进行中"></el-option>
						<el-option label="已结束" value="已结束"></el-option>
						<el-option label="未开始" value="未开始"></el-option>
					</el-select>
				</template>
			</el-table-column>
			<el-table-column prop="publishTime" label="发布时间" align="center"></el-table-column>
			<el-table-column prop="estimateTime" label="预估时间" align="center"></el-table-column>
			<el-table-column prop="endTime" label="结束时间" align="center"></el-table-column>
			<el-table-column label="列表图" align="center">
				<template slot-scope="scope">
					<el-upload class="upload-demo" action="#" :show-file-list="false" :on-preview="handlePreview"
						:on-remove="handleRemove" :before-remove="beforeRemove" :limit="1" :on-exceed="handleExceed"
						:file-list="scope.row.imgList">
						<el-button size="mini" type="primary">上传</el-button>
					</el-upload>
				</template>
			</el-table-column>
			<el-table-column label="推荐" align="center">
				<template slot-scope="scope">
					<el-switch v-model="scope.row.recommend"></el-switch>
				</template>
			</el-table-column>
			<!-- <el-table-column prop="activityLink" label="活动链接" align="center" show-overflow-tooltip></el-table-column> -->
			<el-table-column label="活动链接">
				<template #default="scope">
					<el-tooltip effect="dark" :content="scope.row.activityLink || '无链接'" placement="top">
						<div class="link-group">
							<el-button type="text" size="mini"
								@click="handleLink(scope.row.activityLink)">查看链接</el-button>
							<el-button type="text" size="mini" icon="el-icon-document-copy"
								@click="handleCopyLink(scope.row.activityLink)"></el-button>
						</div>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column label="状态" align="center">
				<template slot-scope="scope">
					<el-switch v-model="scope.row.status"></el-switch>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" align="center" sortable></el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="primary" size="mini">编辑</el-button>
					<el-button type="danger" size="mini">删除</el-button>
					<el-button type="primary" size="mini">详情</el-button>
					<el-button type="primary" size="mini" style="margin-top: 6px;">报名数据</el-button>
					<el-button type="warning" size="mini" style="margin-top: 6px;">表单编辑</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				searchForm: {
					activityId: '',
					activityTitle: '',
					timeRange: []
				},
				tableData: [{
						index: 1,
						activityTitle: '扬州大学第12届国际青年学者论坛',
						sponsor: '扬州大学',
						activityStatus: '进行中',
						publishTime: '2025-11-07 00:00:00',
						estimateTime: '',
						endTime: '2025-12-18 00:00:00',
						imgList: [],
						recommend: false,
						activityLink: 'https://www.wuton...',
						status: true,
						createTime: '2025-11-07'
					},
					{
						index: 2,
						activityTitle: '南京邮电大学2025年全球人才交流会巴黎站',
						sponsor: '南京邮电大学',
						activityStatus: '进行中',
						publishTime: '2025-11-07 00:00:00',
						estimateTime: '',
						endTime: '2025-11-18 00:00:00',
						imgList: [],
						recommend: false,
						activityLink: 'https://www.wuton...',
						status: true,
						createTime: '2025-11-07'
					}
				]
			};
		},
		methods: {
			handleLink(link) {
				if (link) {
					window.open(link, '_blank');
				}
			},
			handleCopyLink(link) {
				if (link) {
					navigator.clipboard.writeText(link).then(() => {
						this.$message.success('链接已复制到剪贴板');
					}).catch(() => {
						this.$message.error('复制失败，请手动复制');
					});
				} else {
					this.$message.warning('无链接可复制');
				}
			},
			// 上传相关方法
			handlePreview(file) {
				console.log('预览文件', file);
			},
			handleRemove(file) {
				console.log('删除文件', file);
			},
			beforeRemove(file) {
				return this.$confirm(`确定移除 ${file.name}？`);
			},
			handleExceed(files, fileList) {
				this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			}
		}
	};
</script>

<style scoped>
	.activity-management {
		padding: 20px;
	}

	.search-bar {
		margin-bottom: 15px;
	}

	.create-btn {
		margin-bottom: 15px;
	}

	/* 活动标题溢出省略样式 */
	.ellipsis-text {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: inline-block;
		max-width: 250px;
		/* 可根据表格列宽调整 */
	}
</style>